<template>
  <d2-container class="permisset">
    <template slot="header">权限设置</template>
    <el-input
      placeholder="输入关键字进行筛选"
      v-model="filterText">
    </el-input>
    <h3>权限列表</h3>
    <el-tree
      :data="auditlists"
      node-key="id"
      :props="defaultProp"
      ref="tree"
      default-expand-all
      :filter-node-method="filterNode"
      :expand-on-click-node="false">
      <div class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <div style="display:flex;margin-left:50px;">
          <el-button type="text" size="mini" @click="dialog = true;alterAuthorityUpdata = data"> 编辑</el-button>
          <el-button type="text" size="mini" @click="dialogVisible = true;alterAuthorityAppends = data"> 添加</el-button>
          <el-button type="text" size="mini" @click="alterAuthorityDelete(node, data)"> 删除</el-button>
        </div>
      </div>
    </el-tree>
    <!--权限添加-->
    <el-dialog
      title="添加"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="权限名称:" prop="pass">
          <el-input type="text" v-model="ruleForm.name" placeholder="请输入权限名称" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="权限控制器名:" prop="pass">
          <el-input type="text" v-model="ruleForm.router" placeholder="请输入权限控制器名" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="权限方法名:" prop="pass">
          <el-input type="text" v-model="ruleForm.methods" placeholder="请输入权限方法名" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="alterAuthorityAppend()">确 定</el-button>
      </span>
    </el-dialog>
    <!--    权限修改-->
    <el-dialog
      title="修改"
      :visible.sync="dialog"
      width="30%">
      <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="权限名称:" prop="pass">
          <el-input type="text" v-model="alterAuthorityUpdata.ps_name" placeholder="请输入权限名称"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="权限控制器名:" prop="pass">
          <el-input type="text" v-model="alterAuthorityUpdata.ps_c" placeholder="请输入权限控制器名"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="权限方法名:" prop="pass">
          <el-input type="text" v-model="alterAuthorityUpdata.ps_a" placeholder="请输入权限方法名"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="alterAuthorityUpdate()">确 定</el-button>
      </span>
    </el-dialog>
  </d2-container>
</template>

<script>
  import {managePes, authoritylist, alterAuthority, managePes_skill} from '@api/sys.login'
  export default {
    name: 'permisset',
    data() {
      return {
        ruleForm: {
          name: "",
          router: "",
          methods: "",
        },
        RolemanagePes_skill: [],
        dialogVisible: false,
        dialog: false,
        dialogRole: false,
        alterAuthorityUpdata: [],
        alterAuthorityAppends: [],
        listdata: [],
        filterText: '',
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        defaultProp: {
          children: 'children',
          label: 'ps_name'
        },
        auditlists: []
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    created() {
      this.getListData()
      this.getAuthData()
    },
    methods: {
      //角色删除
      managePes_skillDelete(data, datas) {
        let params = {
          code: "2",
          role_id: datas.role_id,
        }
        managePes_skill(params).then(res => {
          this.listdata = []
          this.getListData()
        })
      },
      //角色增加
      managePes_skillAppend() {
        return console.log();
        let params = {
          code: "0",
          Role_name: this.RolemanagePes_skill.label,
          Role_ps_ids: []
        }
        managePes_skill(params).then(res => {
          console.log(res);
        })
      },
      //角色修改
      managePes_skillUpdata() {
        let params = {
          code: "1",
          role_id: "",
        }
        managePes_skill(params).then(res => {
          console.log(res);
        })
      },
      //权限修改
      alterAuthorityUpdate() {
        console.log(this.alterAuthorityUpdata);
        let params = {
          code: "1",
          ps_name: this.alterAuthorityUpdata.ps_name,
          ps_pid: this.alterAuthorityUpdata.ps_pid,
          ps_c: this.alterAuthorityUpdata.ps_c,
          ps_a: this.alterAuthorityUpdata.ps_a,
          ps_id: this.alterAuthorityUpdata.ps_id,
        }
        alterAuthority(params).then((res) => {
          this.auditlists = []
          this.getAuthData()
          this.dialog = false
        })
      },
      //权限新增
      alterAuthorityAppend() {
        let params = {
          code: "0",
          ps_name: this.ruleForm.name,
          ps_pid: this.alterAuthorityAppends.ps_id,
          ps_c: this.ruleForm.router,
          ps_a: this.ruleForm.methods,
        }
        alterAuthority(params).then((res) => {
          this.auditlists = []
          this.getAuthData()
          this.dialogVisible = false
        })
      },
      //权限删除
      alterAuthorityDelete(data, datas) {
        let params = {
          code: "2",
          ps_id: datas.ps_id,
        }
        alterAuthority(params).then((res) => {
          this.getAuthData()
          this.auditlists = []
        })
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      getListData() {
        managePes().then(res => {
          res.data.forEach(item => {
            this.$set(item, 'children', [])
            item.son.forEach((list, idx) => {
              item.children.push({
                id: idx,
                label: list,
                show: false,
                role_id: item.Role_id
              })
            })
            this.listdata.push({
              id: item.Role_id,
              label: item.name,
              children: item.children
            })
          });
          console.log('角色列表', this.listdata)
        })
      },
      getAuthData() {
        authoritylist().then(res => {
          console.log('权限列表', res.date)
          res.date.forEach((item) => {
            this.auditlists.push({
              ps_id: item.ps_id,
              ps_name: item.ps_name,
              children: item.children
            })
          })
        })
      },
      append(data) {
        console.log(data);
        const newChild = {id: id++, label: 'testtest', children: []};
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newChild);
      },
      remove(node, data) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },

      appendAudit(data) {
        console.log(data);
        const newChild = {id: ps_id++, label: 'testtest', children: []};
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newChild);
      },
      removeAudit(node, data) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },
    }
  }
</script>

<style lang="scss" scoped>
  .permisset {
    .custom-tree-node {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
  }
</style>

